<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增学生</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div id="app" class="container">
    <h2>新增学生</h2>
    <form @submit.prevent="submit()">
        <div class="mb-3">
            <label class="form-label">姓名</label>
            <input v-model="student.name" type="text" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">性别</label>
            <input v-model="student.sex" type="text" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">班级</label>
            <input v-model="student.className" type="text" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">生日</label>
            <input v-model="student.birthday" type="date" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">身份证号码</label>
            <input v-model="student.idCarNo" type="text" class="form-control" required>
        </div>
        <div class="mb-3">
            <button type="submit" class="btn btn-primary">提交</button>
            <a href="student_list.html" class="btn btn-secondary">返回</a>
        </div>

    </form>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            student:{}
        },
        methods:{
            //加载学生数据
            loadById(){
                let id = location.search.substring(1);
                axios.get('/student/getById?id='+id).then(function (response) {
                    app.student = response.data;
                })
            },
            //提交表单
            submit() {
                axios.post('/student/update',this.student).then(function (response) {
                    if (response.data=='OK'){
                        alert('修改成功');
                        location.href = '/student_list.html';
                    }
                }).catch(function (error) {
                    alert(error);
                })
            }
        },
        created(){
            this.loadById();
        }
    })
</script>
</html>